<template>
    <div class="mainContent">
        <div class="search searchBox">
            <div class="list">
                <span>关键字搜索：</span>
                <Input v-model="keyword" placeholder="请输入设备编号、硬件SN" style="width: 250px" maxlength="15" clearable />
                <input type="password" autocomplete="new-password" style="display: none" />
            </div>
            <div class="list">
                <span>上次通讯时间：</span>
                <DatePicker type="daterange" :options="options" :clearable="false" v-model="dateArr" v-if="inputShow" format="yyyy-MM-dd" placement="top" transfer  placeholder="请选择日期" style="width: 250px;" @on-change="getDateArr" ></DatePicker>
                <DatePicker type="daterange" format="yyyy-MM-dd" placement="top"  placeholder="请选择日期" v-if="inputShow" style="opacity:0;position: absolute;top:-9999px;width:1px;"></DatePicker>
            </div>
            <input type="text" class="intBox" style="display:none" />
            <div class="list">
                <el-button  v-preventReClick="1500" type="primary" @click="searchAll"  style="border-radius: 2px;padding:10px 25px;">搜索</el-button>
                <el-button  v-preventReClick="1500" type="info" @click="clear"  style="margin-left:20px; border-radius: 2px; padding:10px 25px;" plain>重置</el-button>
            </div>
        </div>
        <div class="tabBox">
            <div class="tableList">
                <el-table :data="list" :stripe="true" >
                    <el-table-column prop="machCode" label="设备编号">
                            <template slot-scope="scope">
                            <span>{{scope.row.machCode ? scope.row.machCode :"—"}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="machTypeName" label="设备类型"></el-table-column>
                    <el-table-column prop="sn" label="硬件SN" ></el-table-column>
                    <el-table-column prop="workState" label="工作状态" >
                            <template slot-scope="scope">
                            <span v-if="scope.row.workState == 1 || scope.row.workState == 4" style="color:#A9B0BB">停机</span>
                            <span v-if="scope.row.workState == 2" style="color:#FFA64D">怠机</span>
                            <span v-if="scope.row.workState == 3" style="color:#28D79C">工作</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="city" label="定位地址" width="200px">
                        <template slot-scope="scope">
                            <Tooltip  transfer :content="scope.row.location ? scope.row.location : '—'" placement="top-start"  max-width='200'>
                                <p style="width:180px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;cursor: pointer;">
                                        {{scope.row.location ? scope.row.location : '—'}}
                                </p>
                            </Tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="batteryPower" label="电量(%)" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.row.batteryPower ? scope.row.batteryPower :"—"}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remainOilPercent" label="油量(%)" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.row.remainOilPercent ? scope.row.remainOilPercent :"—"}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="time" label="上次通讯时间" ></el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="list.length>0">
                <div class="float-right">
                    <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
    getMachDeviceList_V1,
} from "@/api/mach.js";
import {initYMD} from "@/sever/utils";
export default {
    data() {
        return {
            keyword: "",
            dateArr: [],
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            pageNum: 1,
            pageSize: 10,
            totalCount: "",
            current: 1,
            inputShow: false,
            list: [],
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.deptName = val.name;
                this.pageNum = 1;
                this.current = 1;
                this.keyword = "";
                this.dateArr = [];
                this.getlist();
            }
        }
    },
    methods: {
        getlist() {
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                startDate: this.dateArr.length > 0 ?initYMD(this.dateArr[0]) :'',
                endDate: this.dateArr.length > 0 ?initYMD(this.dateArr[1]) :'',
                keyword: this.keyword,
                deptId: this.deptId
            };
            getMachDeviceList_V1(params)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list ;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        pageChange(index) {
            if (this.keyword == undefined) {
                this.keyword = "";
            }
            if (this.dateArr == undefined) {
                this.dateArr = [];
            }
            this.pageNum = index;
            this.getlist();
        },
        getDateArr(index) {
            this.dateArr = index;
        },
        clear() {
            this.pageNum = 1;
            this.current = 1;
            this.keyword = "";
            this.dateArr = [];
            this.list = [];
            this.getlist();
        },
        searchAll() {
            this.pageNum = 1;
            this.current = 1;
            this.list = [];
            if (this.keyword == undefined) {
                this.keyword = "";
            }
            if (this.dateArr[0] == undefined || this.dateArr[0] == '' || this.dateArr[1] == undefined || this.dateArr[1] == '') {
                this.dateArr = [];
            }
            this.getlist();
        },
        bubbleSort(arr) {
            if (Array.isArray(arr)) {
                for (var i = arr.length - 1; i > 0; i--) {
                    for (var j = 0; j < i; j++) {
                        if (arr[j].machId < arr[j + 1].machId) {
                            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
                        }
                    }
                }
                return arr;
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.deptName = this.$store.state.porjectObject.name;
        this.getlist();
        setTimeout(()=>{
            this.inputShow = true;
        },1)
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style lang="scss" scoped>
// @import "../../assets/style/mach/mainContent.scss";
@import "../../assets/style/mach/msgModal.scss";
.mainContent {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #F5F5F5;
    .search {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        background:#fff;
        padding: 10px;
        box-sizing: border-box;
        &.searchBox{
            justify-content: flex-start;
            flex-wrap: wrap;
            padding: 0 20px 15px;
            .list{
                margin-right: 50px;
                span{
                    &:first-of-type{
                        color: #373D41;
                        font-family: MicrosoftYaHeiLight;
                    }
                }

            }
        }
        .left{
            width: 50%;
            /deep/ .ivu-tabs-bar{
                width: 100%;
                margin: 0 auto;
                border: none;
            }
            /deep/ .ivu-tabs-tab{
                padding-bottom: 20px;
                box-sizing: border-box;
            }
        }
        .right{
            margin-top: -20px;
        }
        .list{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 20px;
            margin-top: 20px;
            span{
                width: 100px;
                text-align: right;
            }
            .ulbox1{
                list-style: none;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 20px;
                .libox1{
                    width: 50px;
                    height: 32px;
                    text-align: center;
                    line-height: 32px;
                    color: var(--themeColor);
                    cursor: pointer;
                    border: 1px solid var(--themeColor);
                }
                li:first-child{
                    border-radius: 16px 0  0 16px;
                }
                li:last-child{
                    border-radius: 0 16px  16px 0;
                }
                .active{
                    background: var(--themeColor);
                    color: #fff;
                    border: none;
                }
            }
        }
    }
    .tabBox{
        width:100%;
        margin-top: 10px;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-sizing: border-box;
        .tableList{
            width: 100%;
            box-sizing: border-box;
            /deep/ .el-table{
                color: #181818;
                font-family: MicrosoftYaHei;
                font-size: 14px;
                td,
                th.is-leaf{
                    border-bottom: none;
                }
                tr{
                    border: none;
                }
                thead th{
                    color: #666666;
                    font-weight: 400;
                }
            }
            /deep/ .el-table__row{
                background-color: #fff;
                cursor: pointer;
            }
            /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td{
                background-color: #F3F6FD ;
                cursor: pointer;
            }
        }
    }
}
</style>


